<template>
    <div class="user-center" ref="pageRef">
        <a-modal
            v-model:open="open"
            title="个人信息"
            :getContainer="getContainer"
            :width="480"
            :footer="null"
        >
            <div class="userInfo">
                <div class="left"></div>
                <div class="right">
                    <div class="item">
                        <div class="label">用户名</div>
                        <div class="value">{{ userInfo.userName }}</div>
                    </div>
                    <div class="item">
                        <div class="label">账号ID</div>
                        <div class="value">1223456</div>
                    </div>
                    <div class="item">
                        <div class="label">开通时间</div>
                        <div class="value">2023-04-28</div>
                    </div>
                    <div class="item">
                        <div class="label">手机号码</div>
                        <div class="value phone-box">
                            <span>{{ userInfo.phone }}</span>
                            <img
                                class="modify"
                                src="@/assets/Lw/modify2.png"
                                alt=""
                                @click="openOldPhone = true"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </a-modal>

        <a-modal
            v-model:open="openOldPhone"
            title="修改手机号码"
            :getContainer="getContainer"
            :width="480"
            :destroyOnClose="true"
        >
            <a-form
                layout="vertical"
                autocomplete="off"
                :model="formState"
                :rules="rules"
                ref="formRef"
            >
                <a-form-item label="当前手机号验证" name="phone" class="phone">
                    <a-input
                        v-model:value="formState.phone"
                        placeholder="请输入"
                    >
                        <template #prefix>
                            +86
                            <div class="line"></div>
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item label="短信验证码" name="code" class="code">
                    <a-input
                        v-model:value.trim="formState.code"
                        placeholder="请输入验证码"
                        autocomplete="off"
                    >
                        <template #suffix>
                            <span class="code-btn" @click="hdlGetCode">
                                {{ codeTxt }}
                            </span>
                        </template>
                    </a-input>
                </a-form-item>
            </a-form>
            <template #footer>
                <a-button type="primary" @click="hdlNext">下一步</a-button>
            </template>
        </a-modal>

        <a-modal
            v-model:open="openNewPhone"
            title="修改手机号码"
            :getContainer="getContainer"
            :width="480"
            :destroyOnClose="true"
        >
            <a-form
                layout="vertical"
                autocomplete="off"
                :model="formState2"
                :rules="rules"
                ref="formRef2"
            >
                <a-form-item label="新手机号" name="phone" class="phone">
                    <a-input
                        v-model:value="formState.phone"
                        placeholder="请输入"
                    >
                        <template #prefix>
                            +86
                            <div class="line"></div>
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item label="短信验证码" name="code" class="code">
                    <a-input
                        v-model:value.trim="formState.code"
                        placeholder="请输入验证码"
                        autocomplete="off"
                    >
                        <template #suffix>
                            <span class="code-btn" @click="hdlGetCode">
                                {{ codeTxt }}
                            </span>
                        </template>
                    </a-input>
                </a-form-item>
            </a-form>
            <template #footer>
                <a-button type="primary" @click="hdlSubmit">提交</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
    import { message } from "ant-design-vue";
    import accountManageService from "@/service/accountManage.service";
    import loginService from "@/service/login.service";
    import { UserInfo } from "@/type/login";
    import getRuleByName from "@/utils/formRules";
    import { stringifyQuery } from "vue-router";

    const pageRef = ref();
    const open = ref(false);

    const openOldPhone = ref(false);
    const openNewPhone = ref(false);

    const getContainer = () => {
        return pageRef.value;
    };
    const formRef = ref();
    const formRef2 = ref();
    const formState = ref({
        phone: "",
        code: "",
    });
    const formState2 = ref({
        phone: "",
        code: "",
    });

    let codeLoading = false;
    const codeTxt = ref("发送验证码");
    const hdlGetCode = async () => {
        if (codeLoading) {
            return;
        }
        if (!formState.value.phone) {
            return message.warning("请输入手机号");
        }
        try {
            let phone = formState.value.phone;
            if (openNewPhone.value) {
                phone = formState2.value.phone;
            }
            await accountManageService.verifyCode(phone);
            let time = 60;
            let timer: any;
            if (time != 60) {
                return;
            }

            codeLoading = true;
            const calcTime = () => {
                codeTxt.value = `${time} 秒`;
                timer = setTimeout(() => {
                    time -= 1;
                    if (time > 0) {
                        calcTime();
                    } else {
                        timer && clearTimeout(timer);
                        codeLoading = false;
                        time = 60;
                        codeTxt.value = "重新发送";
                    }
                }, 1000);
            };

            calcTime();
        } catch (err) {
            console.log(err);
        }
    };

    const userInfo = ref(new UserInfo());
    const toggleOpen = async () => {
        if (!open.value) {
            loginService.getUserInfo().then((res) => {
                let data = res.data.result.data || {};
                userInfo.value = data;
                formState.value.phone = data.phone;
            });
            formRef.value && formRef.value.clearValidate();
        }
        open.value = !open.value;
    };

    const hdlNext = async () => {
        formRef.value
            .validate()
            .then(async () => {
                let res = await accountManageService.checkVerifyCode(
                    stringifyQuery(formState.value),
                );
                if (res.data.status_code != 0 && res.data.result.data == true) {
                    codeLoading = false;
                    codeTxt.value = "发送验证码";
                    formRef2.value && formRef2.value.clearValidate();
                    formState2.value.phone = "";
                    formState2.value.code = "";

                    openOldPhone.value = false;
                    openNewPhone.value = true;
                }
            })
            .catch((err: any) => {
                console.log(err);
            });
    };

    const hdlSubmit = async () => {
        formRef2.value
            .validate()
            .then(async () => {
                let res = await accountManageService.modify(
                    stringifyQuery(formState2.value),
                );
                if (res.data.status_code != 0) {
                    // 退出登录
                    // window.microApp.dispatch({ type: "LOGOUT" });
                }
            })
            .catch((err: any) => {
                console.log(err);
            });
    };

    defineExpose({
        toggleOpen,
    });

    const rules = {
        phone: [getRuleByName("required", "请输入手机号")],
        code: [getRuleByName("required", "请输入验证码")],
    };
</script>

<style lang="scss" scoped src="./UserCenter.scss"></style>
